<template>
  <div>
    <a-layout style="background-color: white">
      <a-layout-header style="background-color: white">星动表单设计器</a-layout-header>
      <a-layout style="background-color: white">
        <a-layout-sider style="background-color: white">
          <div>表单组件
            <div>
              <div v-for="(item,index) of allCompoent" :key="index" @click="handelComp(item.type)">
                {{item.name}}
              </div>
            </div>
          </div>
          <div>辅助组件</div>
        </a-layout-sider>
        <a-layout-content style="background-color: white">
          <BasicForm
            :schemas="schemasInfo"/>
        </a-layout-content>
        <a-layout-sider style="background-color: white">
          <div>组件配置</div>
          <div>表单配置</div>
        </a-layout-sider>
      </a-layout>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
  import {ref} from 'vue'
  import {BasicForm, FormSchema, useForm} from '/@/components/Form/index'
  import {useBasicFormSchema} from "/@/views/system/depart/depart.data";

  const allCompoent = ref([{name: '普通输入框', icon: '', type: 'input'}])
  let schemasInfo: FormSchema[] =ref([])

  function handelComp(type) {
    console.log('handelComp', type)
    schemasInfo.value.push(
      {
        label: '输入框',
        field: 'a' + new Date().getTime(),
        component: 'Input'
      })
    console.log('registForm', schemasInfo.value)
    // registForm()
  }

  function registForm() {
    console.log('registForm', schemasInfo)
    //注册表单
    const [registerForm, {resetFields, setFieldsValue, validate, updateSchema}] = useForm({
      schemas: schemasInfo,
      showActionButtonGroup: false,
    })
  }
</script>

<style scoped>

</style>
